<template>
    <el-dialog :model-value="CombinationWordDialog" :show-close="false" modal-class="customize-dialog"
        :append-to-body="true" :close-on-click-modal="false" align-center width="900px">
        <template #header="{ titleId, titleClass }">
            <div class="flex justify-between items-center dialog-header">
                <div class="flex items-center">
                    <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
                </div>
                <div class="flex items-center">
                    <svg-icon size="16px" icon-class="close-line" @click="closeDialog"></svg-icon>
                </div>
            </div>
        </template>
        <div>
            <div class="h-400px overflow-hidden">
                <el-scrollbar :always="true">
                    <ul class="combinations">
                        <li v-for="(item,index) in combinations" :key="index" :title="item">{{ index + 1 }}、 {{ item }}</li>
                    </ul>
                </el-scrollbar>
            </div>
        </div>
        <div class="flex flex-center mt-16px mb-6px">
            <el-button @click="closeDialog">取消</el-button>
            <el-button @click="closeDialog" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps<{
    CombinationWordDialog: boolean,
    combinations: any[],
    title: string
}>()

const emit = defineEmits(['closeDialog', 'confirm'])

function closeDialog() {
    emit('closeDialog')
}
</script>

<style lang="scss" scoped>
.combinations{
    overflow: hidden;
    li{
        width: 33.33%;
        float: left;
        font-size: 14px;
        line-height: 40px;
        height: 40px;
        padding-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-bottom:1px solid #ebeef5;
    }
}
</style>